Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(rich-text-editor): adjust style, fit Highlight, Default, Disabled #357

Merged
merged 3 commits into from
Aug 7, 2023
Merged

style(rich-text-editor): adjust style, fit Highlight, Default, Disabled #357

merged 3 commits into from
Aug 7, 2023

Conversation

Caesar-ch
Copy link
Collaborator

@Caesar-ch Caesar-ch commented Aug 1, 2023 •
edited by kagol
Loading

PR

PR Checklist

加入svg图形，增加默认选中，高亮，禁用状态样式
2-样式提交

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Add svg icon, support highlighting , default, disabled style

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@kagol kagol added the enhancement New feature or request label Aug 1, 2023
kagol
kagol reviewed Aug 1, 2023
View reviewed changes
packages/renderless/src/rich-text-edtior/vue.ts Outdated
const file = event.target.files[0];
if (!file.type.match("image.*")) {
alert("请选择图片文件！");
return;
Copy link
Member

@kagol kagol Aug 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Caesar-ch 代码格式不对，缩进应该是两个空格，并且没有末尾分号

kagol
kagol reviewed Aug 1, 2023
View reviewed changes
packages/vue/src/rich-text-editor/src/pc.vue Outdated
bold加粗
<button @click="state.editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': state.editor?.isActive('bold') }">
<svg t="1690608596338" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Caesar-ch svg图片应该使用单独的xxx.svg图片保存，而不是直接放到模板里，确保代码的可维护性

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那是在pc.vue所在目录里新建个assets文件夹里面存下载的svg图片吗

kagol
kagol reviewed Aug 1, 2023
View reviewed changes
packages/vue/src/rich-text-editor/src/pc.vue Outdated
@@ -131,50 +373,139 @@ export default defineComponent({
// props: [...props, 'type', 'text', 'size', 'icon', 'resetTime', 'nativeType', 'loading', 'disabled', 'plain', 'autofocus', 'round', 'circle', 'tabindex'],
components: { EditorContent },
setup(props, context) {
return setup({ props, context, renderless, api, extendOptions: { useEditor, Collaboration, StarterKit, Y, WebrtcProvider, Table, TableCell, TableHeader, TableRow, Color, TextStyle, Image } })
return setup({ props, context, renderless, api, extendOptions: { useEditor, Collaboration, StarterKit, Y, WebrtcProvider, Table, TableCell, TableHeader, TableRow, Color, TextStyle, Image, Highlight, Link, Underline, Subscript, Superscript } })
}
})
</script>

<style lang="less">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

样式请加上 scoped，避免样式污染

kagol
kagol reviewed Aug 1, 2023
View reviewed changes
packages/vue/src/rich-text-editor/src/pc.vue Outdated
}
}
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Caesar-ch 样式文件需要单独存放在 packages/theme 子包中，不要直接放到模板里，另外样式需要有两个文件index.less/vars.less，index.less 中使用 vars.less 中的CSS Var主题变量

LadyChatterleyLover
LadyChatterleyLover reviewed Aug 3, 2023
View reviewed changes
Copy link
Contributor

@LadyChatterleyLover LadyChatterleyLover left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

编辑器最好装一个eslint插件，自动安装eslint规则格式化代码

LadyChatterleyLover
LadyChatterleyLover reviewed Aug 3, 2023
View reviewed changes
packages/renderless/src/rich-text-edtior/vue.ts
if (url) {
editor.chain().focus().setImage({ src: url }).run()
}
const editor = useEditor({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这一块的配置看能不能单独抽离出去，让用户可以自定义

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这块的抽离的话我想着是往后面，那版专门抽离配置，所以目前没考虑

LadyChatterleyLover
LadyChatterleyLover reviewed Aug 3, 2023
View reviewed changes
packages/renderless/src/rich-text-edtior/vue.ts
}
const setLink = () => {
const previousUrl = editor.value.getAttributes('link').href
const url = window.prompt('URL', previousUrl)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果url存在，不需要做操作吗？

LadyChatterleyLover
LadyChatterleyLover reviewed Aug 3, 2023
View reviewed changes
packages/renderless/src/rich-text-edtior/vue.ts Outdated
alert("请选择图片文件！");
return;
}
var reader = new FileReader();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要用var, 没改变的变量统一用const

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

LadyChatterleyLover
LadyChatterleyLover reviewed Aug 3, 2023
View reviewed changes
packages/renderless/src/rich-text-edtior/vue.ts Outdated
const handleChange = (event) => {
const file = event.target.files[0];
if (!file.type.match("image.*")) {
alert("请选择图片文件！");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

也不要用alert，可以引用组件库提示组件

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

@kagol kagol merged commit da481a5 into opentiny:editor-dev Aug 7, 2023
kagol added a commit that referenced this pull request Aug 17, 2023
@kagol @Caesar-ch
feat: add rich-text-editor component (#401)
1648886 
* feat(rich-text-editor): add new component rich-text-editor (#346)

* feat(rich-text-editor): add new components rich-text-editor

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* style(rich-text-editor): adjust style, fit Highlight, Default, Disabled (#357)

* style(rich-text-editor): adjust style, fit Highlight, Default, Disabled

* fix(rich-text-editor): Space format changed from four to two

* fix(rich-text-editor): add svg file and support high light and disabled and default

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* feat(rich-text-editor): add text alignment, task list, table interaction (#372)

* feat(rich-text-editor): add text alignment, task list, table interaction

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

---------

Co-authored-by: Caesar-ch <74941512+Caesar-ch@users.noreply.github.com>
Co-authored-by: 常浩-BJS21325 <changhao01@youdao>
kagol added a commit that referenced this pull request Aug 17, 2023
@kagol @Caesar-ch
chore: merge editor-dev to dev (#403)
c0cd7cd 
* feat(rich-text-editor): add new component rich-text-editor (#346)

* feat(rich-text-editor): add new components rich-text-editor

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* style(rich-text-editor): adjust style, fit Highlight, Default, Disabled (#357)

* style(rich-text-editor): adjust style, fit Highlight, Default, Disabled

* fix(rich-text-editor): Space format changed from four to two

* fix(rich-text-editor): add svg file and support high light and disabled and default

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* feat(rich-text-editor): add text alignment, task list, table interaction (#372)

* feat(rich-text-editor): add text alignment, task list, table interaction

---------

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* perf(rich-text-editor): split pure function from vue.ts to index.ts (#395)

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>

* fix(rich-text-editor): fix conflict

---------

Co-authored-by: Caesar-ch <74941512+Caesar-ch@users.noreply.github.com>
Co-authored-by: 常浩-BJS21325 <changhao01@youdao>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LadyChatterleyLover LadyChatterleyLover LadyChatterleyLover left review comments

@kagol kagol kagol approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Caesar-ch @kagol @LadyChatterleyLover